/** 
 * 学习目标：this指向问题解决方案
方案1：render中使用箭头函数
方案2：bind修改this指向
方案3：class箭头函数方法 - 推荐✅ 
 * */
import React from "react";

export default class App extends React.Component {
    state = {
        msg: 'hello react'
    }
    // 钩子函数，react中自带结构体，React的源码处理this
    render() {
        return (
            <div>
                <h1>看this</h1>
                <div>
                    {/* 方案1：render中使用箭头函数 */}
                    <button onClick={() => this.handleClick()}>方案一</button>
                    {/* 方案二 */}
                    {/* 方案2：bind修改this指向 */}
                    <button onClick={this.handleClick.bind(this)}>方案二</button>
                    {/* 方案3：class箭头函数方法 - 推荐✅ */}
                    <button onClick={this.handleClick3}>方案二</button>
                </div>
            </div>
        )
    }
    //  方案一
    handleClick() {
        console.log(this, 'this')
    }
    // 方案2：bind修改this指向
    // handleClick = () => {
    //     console.log(this, 'this')
    // }
    /* 方案3：class箭头函数方法 - 推荐✅ */
    handleClick3 = () => {
        console.log(this, 'this')
    }
}